<template>
	<view class="member-grade">
    <view class="bg-trans" :style="gradeList[this.currentGradeId].headerBg"></view>
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view class="container">
			<view class="top">
          <z-swiper class="swiper" grabCursor centeredSlides slidesPerView="auto"  @slideChange="onSlideChange">
            <z-swiper-item v-for="(item,name,index) in gradeList" :key="name" :custom-style="{width:'640rpx'}">
              <view class="grade-icon" :class="{'light': index === 4}">
                <view class="grade-text"><i>{{gradeText[name]}}会员</i></view>
                <view class="lv-container">
                  <image class="icon-box" :src="'http://wx.xiongmaovip.com/miniapp/static/personal-center/LV'+(index+1)+'.png'" />
                </view>
                <view class="crown-icon">
                  <image :src="'https://wx.xiongmaovip.com/miniapp/static/personal-center/crown-'+name+'.png'"></image>
                </view>
                <view class="upgradation" v-if="memberVo.growVal < growValMap[name]*1">
                  还差 <text>{{growValMap[name]- memberVo.growVal}}</text> 成长值升级
                </view>
                <view class="upgradation" v-else>
                  已达标
                </view>
                <view class="progressb">
                  <view class="progressb-bar" :style="{'background': item.barColor}">
                    <view class="current" :style="{'background': item.progressColor, width: getUpdateProgress(growValMap[name]) }"></view>
                  </view>
                </view>
                <view class="lvPanel">
                  <text>Lv{{index}}</text>
                  <text>Lv{{index+1}}</text>
                </view>
<!--                <view class="wave"></view>-->
<!--                <image class="bg-wave" src="http://wx.xiongmaovip.com/miniapp/static/personal-center/grade-bg-wave.png"></image>-->
                <image class="bg-wave" :src="'http://wx.xiongmaovip.com/miniapp/static/personal-center/bg-'+name+'.png'"></image>
              </view>
            </z-swiper-item>
          </z-swiper>
			</view>
			<view class="bottom">
				<view class="equity-title">
					<image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/grade-title-sh.png" mode=""></image>
				</view>
			</view>
      <view class="detail">
        <view class="detail-panel">
          <view class="item">
            <view class="label">等级名</view>
            <view class="info">{{gradeList[this.currentGradeId].name}}</view>
          </view>
          <view class="item">
            <view class="label">成长值</view>
            <view class="info">{{gradeList[this.currentGradeId].growthValue}}</view>
          </view>
          <view class="item">
            <view class="label">加油优惠</view>
            <view class="info">{{gradeList[this.currentGradeId].fuelPreferential}}</view>
          </view>
          <view class="item">
            <view class="label">充电优惠</view>
            <view class="info">{{gradeList[this.currentGradeId].chargePreferential}}</view>
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
	import mvBar from "@/components/mysNavBar.vue";

  export default {
    components: {mvBar},
		data() {
			return {
        mysNavConfig: {
          navPadding: true,
          isHome: false,
          navFixed: true,
          navTitle: {
            text: "会员等级",
            color: "#1B1B1B",
            fontSize: "34upx", // px upx rpx
            fontWeight: "500", // blod
          },
          leftIconPath: 'http://wx.xiongmaovip.com/miniapp/static/header/back-b.png',
        },
				loading: false,
				memberVo: {},
        currentGradeId: 720,
        gradeList:{
          720: {
            headerBg: 'background: linear-gradient(181.1deg, #FCE5D3 0.92%, rgba(229, 232, 239, 0) 86.79%);',
            cardBg: 'background: linear-gradient(101.37deg, #FAE9DB 1.27%, #FFF7F0 33.55%, #FCDBBF 98.9%);',
            name: "青铜会员",
            growthValue: '0',
            fuelPreferential: '92#汽油:0.1/升,95#汽油:0.1/升,柴油:0.1/升,快充:0.05/度',
            chargePreferential: '服务费:0.05元/度',
            barColor: '#E2BAB1',
            progressColor: '#7F3421',
          },
          721: {
            headerBg: 'background: linear-gradient(181.1deg, #D0D8F7 0.92%, rgba(229, 232, 239, 0) 86.79%);',
            cardBg: 'background: linear-gradient(102.28deg, #E9EEFA 1.35%, #F5F8FF 28.32%, #E6ECFC 100%);',
            name: "白银会员",
            growthValue: '1-499',
            fuelPreferential: '92#汽油:0.15/升,95#汽油:0.15/升,柴油:0.1/升,快充:0.06/度',
            chargePreferential: '服务费:0.06元/度',
            barColor: '#CCD2EB',
            progressColor: '#4463DC',
          },
          722: {
            headerBg: 'background: linear-gradient(181.1deg, #FEF7DB 0.92%, rgba(254, 247, 219, 0) 86.79%);',
            cardBg: 'background: linear-gradient(101.37deg, #FEF6DA 1.27%, #FDF4D4 33.55%, #F8DFA2 98.9%);',
            name: "黄金会员",
            growthValue: '500-999',
            fuelPreferential: '92#汽油:0.2/升,95#汽油:0.2/升,柴油:0.1/升,快充:0.07/度',
            chargePreferential: '服务费:0.07元/度',
            barColor: '#E7D388',
            progressColor: '#DB8E10',
          },
          723: {
            headerBg: 'background: linear-gradient(181.1deg, #FBF3FD 0.92%, rgba(254, 247, 219, 0) 86.79%);',
            cardBg: 'background: linear-gradient(101.37deg, #E3EFFD 1.27%, #F9EBF5 33.55%, #DAD7FC 98.9%);',
            name: "铂金会员",
            growthValue: '1000-1499',
            fuelPreferential: '92#汽油:0.25/升,95#汽油:0.25/升,柴油:0.1/升,快充:0.08/度',
            chargePreferential: '服务费:0.08元/度',
            barColor: '#C6B6EC',
            progressColor: '#381C7F',
          },
          724: {
            headerBg: 'background: linear-gradient(181.05deg, #FCDBE0 0.88%, #D5E3F6 41.23%, rgba(254, 247, 219, 0) 91.57%);',
            cardBg: 'background: linear-gradient(106.17deg, #0A0B2B 3.98%, #222591 96.77%);',
            name: "钻石会员",
            growthValue: '1500-9999',
            fuelPreferential: '92#汽油:0.3/升,95#汽油:0.3/升,柴油:0.1/升,快充:0.1/度',
            chargePreferential: '服务费:0.1元/度',
            barColor: '#DDCFFF',
            progressColor: '#C36FF5',
          },
        },
				gradeMap: {
					720: 'Lv1',
					721: 'Lv2',
					722: 'Lv3',
					723: 'Lv4',
					724: 'Lv5',
				},
				gradeText: {
					720: '青铜',
					721: '白银',
					722: '黄金',
					723: '铂金',
					724: '钻石',
				},
				growValMap: {
					720: '0',
					721: '1',
					722: '500',
					723: '1000',
					724: '1500',
				},
				gradeImg: {
					720: 'https://s11.ax1x.com/2024/02/27/pFdMVyD.png',
					721: 'https://s11.ax1x.com/2024/02/27/pFd3e3t.png',
					722: 'https://s11.ax1x.com/2024/02/27/pFd3mgP.png',
					723: 'https://s11.ax1x.com/2024/02/27/pFd3njf.png',
					724: 'https://s11.ax1x.com/2024/02/27/pFd3Ku8.png',
				},
			};
		},
		onLoad(option) {
			this.memberVo = JSON.parse(option.memberVo)
      // this.memberVo.growVal = 320
		},
		methods: {
      onSlideChange(swiper){
        this.currentGradeId = Object.keys(this.gradeList)[swiper.activeIndex]
        console.log(this.currentGradeId)
      },
      getUpdateProgress(total){
        const d = total * 1
        if (d !== 0){
          if (this.memberVo.growVal > total)
            return '100%'
          else
            return (this.memberVo.growVal / d) * 100 + '%'
        }else {
          return '100%'
          // return this.memberVo.growVal > 0 ? 100 + '%' : 0 + '%'
        }
      },
		}
	}
</script>

<style lang="scss" scoped>
	.member-grade {
    background: #FFFFFF;
    height: 100vh;
    z-index: -1;

    .bg-trans{
      position: fixed;
      left: 0;
      top: 0;
      background: linear-gradient(181.1deg, #FCE5D3 0.92%, rgba(229, 232, 239, 0) 86.79%);
      width: 100%;
      height: 600upx;
      z-index: 0;
    }

		.container {
			.top {
        margin-top: 72upx;
        ::v-deep{
          .swiper{
            margin-left: 32upx;
            margin-right: 32upx;
            overflow: visible !important;
          }
        }

				.grade-icon {
          margin: auto;
          width: 624upx;
          height: 320upx;
          box-sizing: border-box;
          border-radius: 20upx;
          padding: 32upx;
          position: relative;
          box-shadow: 0 8rpx 12rpx 0 #0000000F;

          z-index: -2;

          .wave{
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("http://wx.xiongmaovip.com/miniapp/static/personal-center/grade-bg-wave.png");
            background-size: 100% 100%;
            border-radius: 20upx;
            opacity: .65;
          }


          .current-grade {
            width: 136rpx;
            background: linear-gradient(90deg, #478BFF 0%, #47C2FF 100%);
            border-radius: 16rpx 0rpx 16rpx 0rpx;
            line-height: 52rpx;
            text-align: center;
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
          }

          .grade-text {
            font-weight: 500;
            font-size: 36rpx;
            line-height: 52rpx;
            color: #1B1B1B;
          }

          .crown-icon{
            position: absolute;
            top: -52upx;
            right: 32upx;
            image{
              width: 206upx;
              height: 168upx;
            }
          }

          .lv-container{
            margin-top: 8upx;
            image{
              width: 120upx;
              height: 60upx;
            }
            text{
              font-size: 26upx;
              line-height: 40upx;
              font-weight: 500;
            }
          }

          .identifying {
            position: absolute;
            top: 82rpx;
            left: 224rpx;

            .br {
              margin-top: -14rpx;
              width: 68rpx;
              height: 12rpx;
              background: linear-gradient(360deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 99%);
            }
          }

          .bg-wave{
            z-index: -2;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }

          .progressb {
            //position: absolute;
            align-items: center;
            display: flex;
            margin-top: 16upx;
            //top: 186rpx;
            //left: 40rpx;

            .progressb-bar {
              border-radius: 20rpx;
              width: 100%;
              height: 16rpx;
              .current{
                height: 100%;
                border-radius: 20rpx;
              }
            }

            text {
              margin-left: 12rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #1B1B1B;
            }
          }

          .lvPanel{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 18upx;
            font-size: 24upx;
            color: #6A6A6A;
          }

          .upgradation {
            font-size: 26rpx;
            color: #6A6A6A;
            line-height: 48rpx;
            margin-top: 8upx;

            text {
              color: #1B1B1B;
            }
          }



          &.light{
            .grade-text, .upgradation{
              color: #FFFFFF;
            }
            .progressb, .upgradation{
              text{
                color: #FFFFFF;
              }
            }
          }
				}
			}

			.shadow-bottom {
				position: absolute;
				width: 100%;
				height: 160rpx;
				margin-top: -50rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

      .detail{
        padding: 0 32upx;
        .detail-panel{
          border: 1px solid #F0F1F2;
          border-radius: 24upx;
          margin-top: 32upx;
          .item{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 28upx;
            border-bottom: 1px solid #F0F1F2;
            .label{
              width: 174upx;
              background: #F8F8F9;
              color: #6A6A6A;
              text-align: right;
              line-height: 80upx;
              padding: 20upx 24upx;
            }
            .info{
              padding: 0 24upx;
              width: 100%;
              font-weight: 500;
              color: #1B1B1B;
              line-height: 44upx;
            }
          }
        }
      }

			.bottom {
				padding: 0px 40rpx;

				.equity-title {
					height: 56rpx;
					//position: absolute;
					width: 100%;
					margin-top: 30rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.table {
				margin-top: 110rpx;
			}
		}
	}
</style>